<template>
	<view style="background-color: #f2f2f2;padding-bottom:130rpx;">
		<to-app extinfo="kuaibu://"/>
		<navBar title="确认订单" />
		<view class="u-p-30 addressBorder">
			<view class="u-flex u-row-between" @click="addressShow = true">
				<view>
					<view class="u-p-b-16">
						<u-tag mode="dark" text="默认" size="mini" type="warning" v-if="address.default"></u-tag>
						<text class="u-p-l-10">{{address.areaPath}}</text>
					</view>
					<view class="u-font-34 u-f-w u-p-b-16">{{address.detailAddress}}</view>
					<view class="u-flex u-p-b-16">
						<view class="u-p-r-30 u-font-26">{{address.consigneeName}}</view>
						<view class="u-font-26">{{address.consigneeMobile}}</view>
					</view>
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="u-p-10 u-font-24" style="background-color: #fff2e5;color: #ff9832;border-radius: 10rpx;">
				温馨提示：提交订单前请确认本单配送地址是否正确
			</view>
		</view>
		<u-gap height="20" bg-color="#f2f2f2"></u-gap>

		<view class="u-p-30" style="border-radius: 20rpx;background-color: #ffffff;">
			<view class="u-flex u-p-b-30">
				<view class="u-p-r-10">
					<u-image src="@/static/mall/shop.png" style="width: 30rpx;height: 30rpx;"></u-image>
				</view>
				<view>{{merShortName}}</view>
			</view>
			<u-line type="info" />
			<view class="u-p-30">
				<view class="u-flex u-col-center">
					<view class="u-p-r-20">
						<u-image @click="viewImage(detaileData.skuPicUrl)" :src="detaileData.skuPicUrl"
							style="width: 180rpx;height: 180rpx;"></u-image>
					</view>
					<view class="u-flex-col u-row-between u-flex-1" style="min-height: 180rpx;">
						<view class="u-font-26 u-line-2">{{detaileData.skuName}}</view>
						<view class="u-type-info u-font-26 u-line-3 u-p-t-10 u-p-b-10">
							已选择：{{detaileData.propertiesValue}}
						</view>
						<view class="u-flex u-row-between u-col-center" v-cloak>
							<view class="u-type-warning-dark u-f-w u-font-32">¥{{totalPrice}}</view>
							<view class="u-font-24">x{{buyNums}}</view>
						</view>
					</view>
				</view>
			</view>

			<u-cell-group>
				<u-cell-item title="糖果抵扣" :arrow="false" v-if="checked">
					<view class="u-type-warning-dark">{{sweet}}糖果可抵扣{{price}}元</view>
				</u-cell-item>
				<u-cell-item title="优惠券" v-show='isUseCoupon&&couponList.length'>
					<view class="u-type-warning-dark" @click="useCoupon" v-if="isCouponLen==null">
						{{couponList.length}}张可用
					</view>
					<view class="u-type-warning-dark" @click="useCoupon" v-else>
						满{{couponList[isCouponLen].minPrice}}抵扣{{couponList[isCouponLen].deductionPrice}}元</view>
				</u-cell-item>
				<u-cell-item title="运费" :arrow="false">
					<view class="u-type-warning-dark">
						{{freightPrice==0?'包邮':freightPrice+'元'}}
					</view>
				</u-cell-item>
				<u-cell-item title="备注" :arrow="false" :title-width="140" style="align-items: flex-start;">
					<view>
						<u-input v-model="orderRemarks" type="textarea" :auto-height="true" :border="true"
							placeholder="建议留言前请与卖家沟通"></u-input>
					</view>
				</u-cell-item>
			</u-cell-group>
			<view class="u-p-t-30 u-p-b-30" :style="{'color': $u.color.contentColor}">支付方式</view>
			<view>
				<radio-group @change="radioChange">
					<view class="u-flex u-row-between u-p-b-50" v-for="(item,index) in payMethod" :key="index">
						<view class="u-flex">
							<u-icon :name="item.iconName" size="65" :color="item.color"></u-icon>
							<text class="u-p-l-10 u-content-color">{{item.name}}</text>
						</view>
						<view>
							<radio style="transform:scale(0.9)" :color="$u.color.warningDark" :value="item.id"
								:checked="index === current" />
						</view>
					</view>
				</radio-group>
			</view>
		</view>
		<view class="submitOrder u-flex u-row-between">
			<view class="u-flex-1 u-text-center">
				<text>共</text>
				<text class="u-p-l-10 u-p-r-10" :style="{'color':$u.color.warningDark}">{{buyNums}}</text>
				<text>件，实际付款：</text>
				<text :style="{'color':$u.color.warningDark}">¥</text>
				<text class="u-p-l-4 u-font-40 u-f-w" :style="{'color':$u.color.warningDark}">{{actualPay}}</text>
			</view>
			<view class="submit-btn u-font-32" @click="openkeyboard()">提交订单</view>
		</view>


		<u-popup v-model="show" mode="bottom" border-radius="14">
			<view class="u-flex u-row-between u-p-30">
				<view class="u-font-34 u-f-w">优惠券</view>
				<view>
					<u-icon name="close-circle" size="45" :color="$u.color.info" @click="show=false"></u-icon>
				</view>
			</view>
			<scroll-view scroll-y="true" style="height: 600rpx;">
				<view class="u-p-30">
					<view v-for="(item,index) in couponList" :key="index" class="u-m-b-30 u-flex"
						style="border: 1px dashed #FF6801;border-radius: 10rpx;overflow: hidden;">
						<view class="coupon u-flex-col u-row-center u-col-center"
							style="width: 240rpx;height: 160rpx;color: white;">
							<view>
								<text class="u-f-w">¥</text>
								<text class="u-f-w" style="font-size: 32px;">{{item.deductionPrice}}</text>
							</view>
							<view class="u-font-26">满{{item.minPrice}}元可用</view>
						</view>
						<view class="u-p-20" style="color: #FF6801;">
							<view>{{item.type}}</view>
						</view>
						<view class="u-p-l-30">
							<u-button type="warning" size="mini" shape="circle" @click="couponClick(item,index)">立即使用
							</u-button>
						</view>
					</view>
				</view>
			</scroll-view>
			<view>
				<u-button type="warning" style="border-radius: 0;" @click="noPoup">暂不使用优惠券</u-button>
			</view>
		</u-popup>

		<!-- 密码键盘相关 -->
		<u-keyboard mode="number" :tooltip="false" :random="true" :dot-enabled="false" v-model="keyBoardShow"
			@change="valChange" @backspace="backspace">
			<template slot="default">
				<view class="u-flex u-row-between u-p-30">
					<view class="u-font-34 u-f-w">请输入交易密码</view>
					<view>
						<u-icon name="close-circle" size="45" :color="$u.color.info" @click="keyBoardShow=false">
						</u-icon>
					</view>
				</view>
				<view class="u-p-b-50">
					<u-message-input :active-color="$u.color.warningDark" :breathe="true"
					:dot-fill="true"
						:focus="true" :disabled-keyboard="true" :maxlength="6" :value="password"></u-message-input>
				</view>
			</template>
		</u-keyboard>
		
		<u-popup v-model="addressShow" mode="bottom" border-radius="14">
			<view class="u-flex u-row-between u-p-30 u-p-t-0">
				<view class="u-font-34 u-f-w">我的收货地址</view>
				<view>
					<u-icon name="close-circle" size="45" :color="$u.color.info" @click="addressShow=false"></u-icon>
				</view>
			</view>
			<scroll-view scroll-y="true" style="height: 800rpx;">
				<myAddress :addressList = 'addressList' @comfirmAddress="comfirmAddress"/>
			</scroll-view>
		</u-popup>
		
		
		<u-modal v-model="tipsShow" @confirm="tipsConfirm" confirm-text="已了解" content="下单后请尽快完成支付,支付成功请前往快步APP查看订单情况" :confirm-color="$u.color.warningDark"></u-modal>
		
		
		<u-modal @confirm="setConfirm" v-model="setAddress" confirm-text="去设置" :confirm-color="$u.color.warningDark" :show-title="false"  content="你还没有收货地址哦,赶快设置一个吧"></u-modal>
	</view>
</template>

<script>
	import navBar from '@/components/navbar/index'
	import md5Libs from "uview-ui/libs/function/md5";
	import myAddress from "./components/address.vue";
	import toApp from '@/components/toApp.vue'
	export default {
		data() {
			return {
				keyBoardShow: false,
				password: '',


				productId: '',
				merShortName: '',
				properties: '',
				buyNums: 0,
				merchantId: '',
				isUseCoupon: '',
				checked: false,
				detaileData: {},
				address: {},
				orderRemarks: '', //备注
				sku_id: '',
				freightPrice: 0,
				couponList: [],


				show: false,
				isCouponLen: null,

				payMethodsList: [{
					id: '1',
					name: '微信支付',
					iconName: 'weixin-circle-fill',
					color: '#03b20f',
					status: false
				}, {
					id: '2',
					name: '支付宝支付',
					color: '#1475f9',
					iconName: 'zhifubao-circle-fill',
					status: false
				}, {
					id: '3',
					name: '银行卡支付',
					iconName: 'photo-fill',
					status: false
				}],
				payMethod: [],
				current: '',
				deductionPrice:0,

				buyNowProgaram: {
					buyNumber: 0,
					couponId: 0,
					couponType: "",
					delivery: {
						consigneeMobile: "",
						consigneeName: "",
						deliveryLatitude: "",
						deliveryLongitude: "",
						deliveryStreet: "",
						deliveryType: 0,
						pickupMobile: "",
						pickupName: "",
						receiverId: 0
					},
					mobile: "",
					orderRemarks: "",
					orderSource: 0,
					payChannel: 0,
					payMode: "h5",
					productId: 0,
					skuId: 0,
					sourceUserId: 0,
					tradePassword: "",
					useSweet: true
				},
				
				addressShow:false,
				addressList:[],
				setAddress:false,
				
				tipsShow:false
			}
		},
		components: {
			navBar,
			myAddress,
			toApp
		},
		computed: {
			// 总售价
			totalPrice() {
				return this.$u.math.NumberMul(Number(this.detaileData.skuSalePrice), Number(this.buyNums))
			},
			sweet() {
				return this.$u.math.NumberMul(Number(this.detaileData.saleSweet), Number(this.buyNums))
			},
			// 糖果可抵扣的价格
			price() {
				return this.$u.math.NumberMul(Number(this.detaileData.deductPrice), Number(this.buyNums))
			},
			actualPay(){
				let tp = 0;
				// 用糖果抵扣
				if (this.checked) {
					tp = this.$u.math.NumberSub(this.totalPrice,this.price);
				} else {
					tp = this.totalPrice
				}
				return this.$u.math.NumberAdd(this.$u.math.NumberSub(tp,this.deductionPrice),this.freightPrice);
			}
		},
		onShow() {
			this.getAllAddress();
			this.getAddress();
		},
		onLoad(option) {
			this.productId = option.productId;
			this.properties = JSON.parse(option.properties);
			this.buyNums = option.buyNums;
			this.merShortName = option.merShortName;
			this.isUseCoupon = JSON.parse(option.isUseCoupon);
			this.merchantId = option.mid;
			this.checked = JSON.parse(option.checked);
		},
		mounted() {
			this.getPorperties();
			this.getPreCreated();
		},
		methods: {
			setConfirm(){
				uni.navigateTo({
					url:'/pages/mallDetails/addAddress'
				})
			},
			comfirmAddress(addr,bool){
				this.address = JSON.parse(addr);
				this.addressShow = bool;
			},
			getAllAddress(){
				this.$u.api.receiveAddress().then(res=>{
					if(res.code==0){
						this.addressList = res.data;
					}
				})
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				this.password += val;
				if(this.password.length>5){
					this.keyBoardShow = false
					this.buyNowProgaram.tradePassword = md5Libs.md5(this.password);
					this.password = '';
					this.submitOrder();
					return
				}
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.password.length) this.password = this.password.substr(0, this.password.length - 1);
			},
			radioChange(ev) {
				this.buyNowProgaram.payChannel = Number(ev.detail.value);
			},
			getPreCreated() {
				this.payMethod = [];
				this.$u.api.preCreated({
					deliveryType: 1,
					merchantId: this.merchantId
				}).then(res => {
					if (res.code == 0) {
						res.data.payChannelList.forEach(item => {
							this.payMethodsList.forEach(i => {
								if (item == i.id) {
									this.payMethod.push(i)
								}
							})
						})
					}
				})
			},
			getPorperties() {
				this.$u.api.selectSKU({
					productId: this.productId,
					selectProperties: this.properties
				}).then(res => {
					if (res.code == 0) {
						this.detaileData = res.data;
						this.getFreight();
						this.getCouponList();
					}
				})
			},
			getAddress() {
				this.$u.api.receiveSddressDefault().then(res => {
					if (res.code == 0) {
						if(res.data == null){
							this.setAddress = true
						}else{
							this.address = res.data;
							this.getFreight();
						}
					}
				})
			},
			getFreight(regionCode) {
				this.$u.api.freight({
					code: this.address.regionCode,
					num: this.buyNums,
					product_id: this.productId,
					sku_id: this.detaileData.id
				}).then(res => {
					if (res.code == 0) {
						this.freightPrice = res.data;
					}
				})
			},
			getCouponList() {
				this.$u.api.couponList({
					price: this.totalPrice
				}).then(res => {
					this.couponList = res.data;
				});
			},
			viewImage(url) {
				let arr = [];
				arr.push(url);
				uni.previewImage({
					urls: arr
				});
			},
			useCoupon() {
				this.show = true
			},
			couponClick(item, index) {
				this.buyNowProgaram.couponId = item.id;
				this.buyNowProgaram.couponType = item.key;
				this.deductionPrice = item.deductionPrice;
				this.isCouponLen = index;
				this.show = false;
			},
			//不使用优惠券
			noPoup(){
				this.buyNowProgaram.couponId = 0;
				this.buyNowProgaram.couponType = '';
				this.deductionPrice = 0;
				this.isCouponLen = null;
				this.show = false;
			},
			chooseAddress() {
				uni.navigateTo({
					url: '/pages/mallDetails/address'
				})
			},
			openkeyboard (){
				if(!this.buyNowProgaram.payChannel){
					this.$u.toast('请选择支付方式');
					return
				}
				this.tipsShow = true;
				
			},
			tipsConfirm(){
				this.keyBoardShow = true;
			},
			//提交订单
			submitOrder() {
				// this.$u.toast('下单后请尽快完成支付')
				this.buyNowProgaram.buyNumber = this.buyNums;
				this.buyNowProgaram.mobile = this.address.consigneeMobile;
				this.buyNowProgaram.delivery.receiverId = this.address.id;
				this.buyNowProgaram.orderRemarks = this.orderRemarks;
				this.buyNowProgaram.productId = this.productId;
				this.buyNowProgaram.skuId = this.detaileData.id;
				this.buyNowProgaram.useSweet = this.checked;
				this.buyNowProgaram.delivery.deliveryType = 1;
				this.$u.api.buyNow(this.buyNowProgaram).then(res=>{
					if(res.code==0){
						if (this.buyNowProgaram.payChannel == 1) {
							window.location.href = res.data.adaPrepayInfo.payInfo[res.data.adaPrepayInfo.payType].h5_url
						}
						if(this.buyNowProgaram.payChannel == 2) {
							window.location.href = res.data.adaPrepayInfo.payInfo[res.data.adaPrepayInfo.payType].pay_info
						}
					}else{
						this.$u.toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.addressBorder {
		padding-bottom: 16px;
		background: #fff url(../../static/mall/addr.png) -7px bottom repeat-x;
		background-size: 64px 5px;
	}

	.coupon {
		background: $u-custom-color;
	}

	.submitOrder {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: white;
		height: 120rpx;
		border-top: 1px solid #f2f2f2;
		z-index: 1000;
	}

	.submit-btn {
		height: 100%;
		background: $u-custom-color;
		width: 240rpx;
		text-align: center;
		line-height: 120rpx;
		color: white;
	}
</style>
